<template>
	<view class="app-user-collect-goods e-radius-20 e-p-20 e-flex bg-white" @tap="$goTo('/pages/classify/goods/info/index', { id: info.id })">
		<radio class="e-m-r-20" :color="color" :checked="checked" @tap.stop="handleCheck" v-show="showRadio" />
		<view class="e-m-r-20">
			<load-image mode="aspectFill" :size="['180rpx']" radius="10rpx" :src="info.coverImg">
			</load-image>
		</view>
		<view class="e-flex-1">
			<view class="app-user-collect-goods__title e-line-2 e-m-b-24">{{info.name }}</view>
			<view >
				<text class="e-font-24 c-red fw-600">{{ $unitEn }}</text>
				<text class="e-font-32 c-red fw-600">{{info.price }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	},
	// #endif
});
</script>
<script lang="ts" setup>
import type {GoodsItem} from '@/common/request/api'
const props = defineProps<{
	info: GoodsItem;
	color:string
	showRadio:boolean
	checked:boolean
}>();
const emit = defineEmits(['change'])
const handleCheck = () => {
	emit('change',props.info.id)
}
</script>

<style scoped lang="scss">
@include appBem_b(user-collect-goods) {
	@include appBem_e(title) {
		height:88rpx;
		line-height: 44rpx;
	}
}
</style>
